<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待处理<i class="el-icon-close"></i></div>
    </div>
    <div class="title-receiving">
      <div>
        <span>订单管理</span>/<span class="detail">待处理详情</span>
      </div>
        <el-button type="success"  @click="handerBase">返回</el-button>
     </div>
    <div class="num-time">
        <span>订单编号:{{form.order_no}}</span><span class="time">下单时间:{{ form.create_time | dateformat('YYYY-MM-DD HH:mm')}}</span>
    </div>  
   
    <div class="container-box">
      <h3 class="marginb20">订单信息</h3>
      <div class="content-form">
        <el-form ref="form"
                 :model="form"
                 label-position="left"> 
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="姓名"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.realname"
                          ></el-input>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="手机号"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.phone"
                          id="copyVal"
                         ></el-input>
                
              </el-form-item>
              <span class="copyBtn" @click="copyConsignee"  data-clipboard-target="#copyVal">复制</span>
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="装修面积"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.house_area"
                          ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="户型"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.house_type"
                          ></el-input>
              </el-form-item>
            </div>
          </div>
          
            <div class="service block">
              <el-form-item label="所在地区">
                 <el-select v-model="province_id" value-key="cityid" @change="select1" placeholder="请选择省份">
                  <el-option
                    v-for="item in province"
                    :key="item.cityid"
                    :label="item.city_name"
                    :value="{cityid:item.cityid,cityname:item.city_name}">
                  </el-option>
                </el-select>
                 <el-select v-model="city_id" value-key="cityid" @change="select2" placeholder="请选择城市">
                  <el-option
                    v-for="item in city"
                    :key="item.cityid"
                    :label="item.city_name"
                    :value="{cityid:item.cityid,cityname:item.city_name}">
                  </el-option>
                </el-select>
                 <el-select v-model="district_id" value-key="cityid" @change="select3" placeholder="请选择县区">
                  <el-option
                    v-for="item in district"
                    :key="item.cityid"
                    :label="item.city_name"
                    :value="{cityid:item.cityid,cityname:item.city_name}">
                  </el-option>
                </el-select>
                 <el-select v-model="street_id" value-key="cityid" @change="select4" placeholder="请选择街道">
                  <el-option
                    v-for="item in street"
                    :key="item.cityid"
                    :label="item.city_name"
                    :value="{cityid:item.cityid,cityname:item.city_name}">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input style="width:20%;margin:10px;" v-model="form.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
              <el-form-item label="小区名称">
                <el-input style="width:20%;margin:10px;" v-model="form.estate" placeholder="请输入小区名称"></el-input>
              </el-form-item>
            </div>

            <!-- 时间选择 -->
            <div class="block">
              <el-form-item label="设计时间">
                <el-date-picker
                  style="margin:10px;"
                  v-model="selectTime"
                  type="daterange"
                  @change="select_time"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </div>

          <div class="form-textarea marginb20">
            <el-form-item label="诉求">
              <el-input type="textarea"
                        rows="5"
                        cols="140"
                        v-model="form.remark"
                        ></el-input>
            </el-form-item>
          </div>
          
        </el-form>
      </div>
    </div>
    <div class="container-box">
      <h3 class="marginb20">图纸/合同</h3>      
        <el-form label-position="left">
          <div class="marginb20">
               <el-form-item label="图纸"
                            label-width="80px">
                  <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_draw"
                    ref="upload"
                    :on-remove="handleRemove_draw"
                    :on-success="handleAvatarSuccess_draw"
                    :before-upload="beforeAvatarUpload_draw"
                    :auto-upload="true"              
                    :limit="10" 
                    :headers="myHeaders"
                    :file-list="drawList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>  
                  <el-dialog :visible.sync="dialogVisible_draw">
                    <img width="100%" :src="dialogImageUrl_draw" alt="">
                  </el-dialog>
              </el-form-item>
          </div>
          <div class="marginb20">
               <el-form-item label="合同"
                            label-width="80px">
                  <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_cont"
                    ref="upload"
                    :on-remove="handleRemove_cont"
                    :on-success="handleAvatarSuccess_cont"
                    :before-upload="beforeAvatarUpload_cont"
                    :auto-upload="true"              
                    :limit="10" 
                    :headers="myHeaders"
                    :file-list="contList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible_cont">
                    <img width="100%" :src="dialogImageUrl_cont" alt="">
                  </el-dialog>
              </el-form-item>
          </div>
          <div class="marginb20">
               <el-form-item label="选材单"
                            label-width="80px">
                  <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_mater"
                    ref="upload"
                    :on-remove="handleRemove_mater"
                    :on-success="handleAvatarSuccess_mater"
                    :before-upload="beforeAvatarUpload_mater"
                    :auto-upload="true"              
                    :limit="10" 
                    :headers="myHeaders"
                    :file-list="materList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible_mater">
                    <img width="100%" :src="dialogImageUrl_mater" alt="">
                  </el-dialog>
              </el-form-item>
          </div>
          <div class="price-num">
            <el-form-item label="合同价格"
                          label-width="80px">
              <el-input type="number"
                        v-model="form.contract_price"
                        ></el-input>
            </el-form-item>
          </div>
          <div class="itemPay">
            <h4>支付次数和比例</h4>
            <div class="payList">
                <div class="item" v-for="(item,index) in payNumList" :key="index">
                    <span>{{index+1}}</span>
                    <el-input v-model="item.propor" @input="proporInput(index)" type="number" placeholder="请输入比例"></el-input>%
                    <div class="proporPrice">￥{{(form.contract_price*(item.propor/100)).toFixed(2)}}</div>
                    <img src="../../../../../assets/orderPlus1.png" @click="plusPayNum" v-if="index==payNumList.length-1 && payNumList.length<8" alt="">
                    <img src="../../../../../assets/orderPlus2.png" @click="reducePayNum(index)" v-if="index==payNumList.length-1 && payNumList.length>1" alt="">
                </div>
            </div>
            <div class="remarksBox">
              备注
              <el-input
                type="textarea"
                style="width:500px;margin-left:20px;"
                :rows="4"
                placeholder="请输入备注"
                v-model="form.pay_rule_desc">
              </el-input>
            </div>
          </div>
        </el-form>
              
    </div>
    <div class="df-c primary-btn">
            <el-button type="primary"
                       class=""
                       @click="handleSure">确定</el-button>
    </div>
  </div>
</template>

<script>
	import ClipboardJS from 'clipboard';
export default {
  data () {
    return {
      myHeaders: {
            'access-token': this.$store.state.token  , //这里重新定义了请求头
            'Authorization': this.$store.state.token ,
            'user-id':this.$store.state.user_id
      },
      form: {},
      dialogImageUrl_draw: '',
      dialogVisible_draw: false,
      dialogImageUrl_cont: '',
      dialogVisible_cont: false,
      dialogImageUrl_mater: '',
      dialogVisible_mater: false,
      drawList:[],
      contList:[],
      materList:[],

      province:[],
      city:[],
      district:[],
      street:[],
      province_id:null,
      city_id:null,
      district_id:null,
      street_id:null,
      selectTime:[new Date(),new Date()],
      payNumList:[{propor:60},{propor:30},{propor:10}],//支付次数与比例
    }
  },
  mounted () {
    this.getOrderInfo()
    this.getProvince()
  },
  methods: {
			// 增加支付次数
			plusPayNum(){
				this.payNumList.push({propor:0})
			},
			// 减少支付次数
			reducePayNum(index){
				this.payNumList.splice(index,1)
			},
    // 获取订单详情
    getOrderInfo(){
      let order_id = this.$route.query.order_id;
      let params = {
        id: order_id
      }
      this.$http.post('/api/admin/decoration/DesignOrder/view',params).then(res => {
        console.log(res,'订单详情');
        if(res.code==1){
          this.form = res.data;
          // 图纸
          if(Array.isArray(res.data.draw_thumb_url)){
            res.data.draw_thumb_url.map(item => {
              this.drawList.push({
                id:item.id,
                url:item.path
              })
            }); 
          }else{
            this.drawList.push({
              url:res.data.draw_thumb_url.path,
              id:res.data.draw_thumb_url.id
            })
          }

          // 合同
          if(Array.isArray(res.data.contract_thumb_url)){
            res.data.contract_thumb_url.map(item => {
              this.contList.push({
                id:item.id,
                url:item.path
              })
            }); 
          }else{
            this.contList.push({
              url:res.data.contract_thumb_url.path,
              id:res.data.contract_thumb_url.id
            })
          }
          console.log(this.contList,'111111');

          // 选材单
          if(Array.isArray(res.data.material_thumb_url)){
            res.data.material_thumb_url.map(item => {
              this.materList.push({
                id:item.id,
                url:item.path
              })
            }); 
          }else{
            this.materList.push({
              url:res.data.material_thumb_url.path,
              id:res.data.material_thumb_url.id
            })
          }

          // 时间
          if(res.data.start_time && res.data.end_time){
            this.selectTime = [this.$moment(res.data.start_time*1000).format('yyyy-MM-DD'),this.$moment(res.data.end_time*1000).format('yyyy-MM-DD')]
          }
          console.log(this.selectTime,'详情时间');
          // this.province = res.data.province
          // this.city = res.data.city
          // this.distric = res.data.distric
          // this.street = res.data.street
          this.province_id = {
            cityid:res.data.province_id?res.data.province_id:null,
            cityname:res.data.province?res.data.province:'',
          }
          if(this.province_id){
            this.getCity()
          }
          this.city_id = {
            cityid:res.data.city_id?res.data.city_id:null,
            cityname:res.data.city?res.data.city:'',
          }
          if(this.city_id){
            this.getDistrict()
          }
         this.district_id = {
            cityid:res.data.district_id?res.data.district_id:null,
            cityname:res.data.district?res.data.district:'',
          }
          if(this.district_id){
            this.getStreet()
          }
          this.street_id = {
            cityid:res.data.street_id?res.data.street_id:null,
            cityname:res.data.street?res.data.street:'',
          }
        }
      })
    },

    // 选择时间
    select_time(e){
      console.log(e,'时间选择');
      let start_time = e[0]
      let end_time = e[1]
      this.selectTime = [this.$moment(start_time).format('yyyy-MM-DD'),this.$moment(end_time).format('yyyy-MM-DD')]
      console.log(this.selectTime,'时间');
    },

    // 选择省份
    select1(e){
      console.log(e,'111');
      this.city = []
      this.city_id = null
      this.district = []
      this.district_id = null
      this.street = []
      this.street_id = null
      this.getCity()
    },
    // 选择城市
    select2(e){
      console.log(e,'222');
      if(!this.province_id){
        this.$message.warning('请先选择省份')
      }
      this.district = []
      this.district_id = null
      this.street = []
      this.street_id = null
      this.getDistrict()
    },
    // 选择县区
    select3(e){
      console.log(e,'333');
      if(!this.city_id){
        this.$message.warning('请先选择城市')
      }
      this.street = []
      this.street_id = null
      this.getStreet()
    },
    // 选择街道
    select4(e){
      console.log(e,'444');
      if(!this.district_id){
        this.$message.warning('请先选择县区')
      }
    },

    // 获取省份
    getProvince(){
      this.$http.post('/api/admin/base/Region/getProvinceList').then(res=>{
        console.log(res,'省份列表');
        if(res.code==1){
          this.province = res.data?res.data:[]
        }
      })
    },
    // 获取城市
    getCity(){
      this.$http.post('/api/admin/base/Region/getCityList',{province_id:this.province_id.cityid}).then(res=>{
        console.log(res,'城市列表');
        if(res.code==1){
          this.city = res.data?res.data:[]
        }
      })
    },
    // 获取县区
    getDistrict(){
      this.$http.post('/api/admin/base/Region/getDistrictList',{city_id:this.city_id.cityid}).then(res=>{
        console.log(res,'县区列表');
        if(res.code==1){
          this.district = res.data?res.data:[]
        }
      })
    },
    // 获取街道
    getStreet(){
      this.$http.post('/api/admin/base/Region/getStreetList',{district_id:this.district_id.cityid}).then(res=>{
        console.log(res,'街道列表');
        if(res.code==1){
          this.street = res.data?res.data:[]
        }
      })
    },

		// 比例
		proporInput(index){
			console.log(index,this.payNumList,'支付比例')
			let allPropor = 0
			this.payNumList.map(item=>{
				allPropor += (item.propor*1)
			})
			console.log(allPropor,'比例之和')
			if(allPropor>100){
				this.$message.warning('比例之和为100')
        console.log(this.payNumList[index],'222');
				this.payNumList[index].propor = 0
			}
		},

    handleSure(){
      if(this.form.contract_price<1){
          this.$message.warning('合同金额不可低于1元')
          return
      }
			// 处理支付次数及比例
			let payArr = []
			let allPrice = 0
			this.payNumList.map(item=>{
				allPrice += (item.propor*1)
				payArr.push(item.propor/100)
			})
			for(let i = 0;i<payArr.length;i++){
				if(payArr[i]<=0){
          this.$message.warning('请均匀分配100%比例')
					return
				}
			}
			console.log(allPrice,'总比例')
			console.log(payArr,'比例数组')
			if(allPrice!=100){
				this.$message.warning('支付次数比例之和必须等于100')
				return
			}
      console.log(this.drawList,'图纸');
      console.log(this.contList,'合同');

			this.form.pay_rule = payArr.join(',');
      this.form.province_id = this.province_id.cityid
      this.form.city_id = this.city_id.cityid
      this.form.district_id  = this.district_id.cityid
      this.form.street_id = this.street_id.cityid
      this.form.province = this.province_id.cityname
      this.form.city = this.city_id.cityname
      this.form.district  = this.district_id.cityname
      this.form.street = this.street_id.cityname

      this.form.start_time = this.selectTime[0]
      this.form.end_time = this.selectTime[1]
      // 图纸
      let drawArr = []
      this.drawList.map(item=>{
        if(item.response){
          drawArr.push(item.response.data.id)
        }else{
          drawArr.push(item.id)
        }
      })
      this.form.draw_thumb_url = drawArr.join(',')

      // 合同
      let contArr = []
      this.contList.map(item=>{
        if(item.response){
          contArr.push(item.response.data.id)
        }else{
          contArr.push(item.id)
        }
      })
      this.form.contract_thumb_url = contArr.join(',')

      // 选材单
      let materArr = []
      this.materList.map(item=>{
        if(item.response){
          materArr.push(item.response.data.id)
        }else{
          materArr.push(item.id)
        }
      })
      this.form.material_thumb_url = materArr.join(',')

      if(!Number(this.form.contract_price)){
        this.$message.warning('请输入合同金额')
        return 
      }
      console.log(this.form,'处理数据');
      this.$http.post('/api/admin/designer/DesignerOrder/handle',this.form).then(res=>{
        console.log(res,'处理结果');
        if(res.code==1){
          this.$message.success('处理成功')
          this.$router.back(1)
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    // 实现复制功能
			copyConsignee() {
				// 括号中的内容：对应复制按钮的class
				let copyBtn = new ClipboardJS('.copyBtn')

        copyBtn.on("success",function(e){
            // 复制成功
            // console.log(e);
            alert("复制成功");
            e.clearSelection();
        });
        copyBtn.on("error",function(e){
            //复制失败；
            console.log( e.action )
        });
			},
      handerBase() {
				this.$router.go(-1);
			},

    // 图纸
     handleRemove_draw(file, fileList) {
       this.drawList = fileList
    },
    handlePictureCardPreview_draw(file) {
        this.dialogImageUrl_draw = file.url;
        this.dialogVisible_draw = true;
    },
    handleAvatarSuccess_draw(res, file,fileList) {
       this.drawList = fileList  
    },
    beforeAvatarUpload_draw(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 合同
     handleRemove_cont(file, fileList) {
       this.contList = fileList
    },
    handlePictureCardPreview_cont(file) {
        this.dialogImageUrl_cont = file.url;
        this.dialogVisible_cont = true;
    },
    handleAvatarSuccess_cont(res, file,fileList) {
       this.contList = fileList  
    },
    beforeAvatarUpload_cont(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 选材单
     handleRemove_mater(file, fileList) {
       this.materList = fileList
    },
    handlePictureCardPreview_mater(file) {
        this.dialogImageUrl_mater = file.url;
        this.dialogVisible_mater = true;
    },
    handleAvatarSuccess_mater(res, file,fileList) {
       this.materList = fileList  
    },
    beforeAvatarUpload_mater(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

  }

}
</script>

<style scoped lang="less">
.current {
  padding-left: 20px;
}
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  display: flex;
  // justify-content: space-between;
  align-items: center;
 
  .el-form-item {
    /* width: 1490px; */
    width: 95%;
  }
}
 .text {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }

.content-form .el-form-item {
  margin-bottom: 0 !important;
}

.form-tel {
  display: flex;
  .tel-input {
    margin-right: 240px;
    display: flex;
    align-items: center;
  }
  .change {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .service {
    display: flex;
    align-items: center;
    
  }
}
.address{
  display: flex
}
.el-select{
       margin: 10px
  }

.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  margin-top: 20px;
  .el-form-item {
    display: flex;
  }
}
.submit-btn {
  padding: 0 0 50px 0;
}


.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}

.title-receiving{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
  .detail{
    color: #409eff;
  }
}
.num-time{
  margin: 20px;
  .time{
    margin-left: 30px;
  }
}
.primary-btn{
  margin-top: 40px;
}
.form-textarea{
  margin-left: 0;
  padding-left: 0;
}
.copyBtn{
  color: #007acc;
  margin-left: 10px;
  cursor: pointer;
}
//图片上传样式
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  // .avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 148px;
  //   height: 148px;
  //   line-height: 178px;
  //   text-align: center;
  // }
  .picture-card{
  display: flex;
}
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
     border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

//合同金额
.price-num{
  width: 50%;
}
.itemPay{
    flex-direction: column;
    margin: 20px 0 0;
    h4{margin-top: 20px;}
    .payList{
        .item{
            display: flex;
            align-items: center;
            margin: 20px 0;
            span{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #a0a0a0;
                color: #a0a0a0;
                text-align: center;
                line-height: 30px;
                margin-right: 20px;
            }
            .proporPrice{
              margin:0 20px;
              color: #DBA954;
            }
            .el-input{
                width: 200px;
            }
            img{
                margin-left: 20px;
                width: 40px;
                height: 40px;
            }
        }
    }
    .remarksBox{
      display:flex;
      margin-top:30px;
    }
}


</style>